<!-- 文章详情 -->
<template>
  <div class="article-detail-container">
    <!-- 标题 -->
    <h3 class="title">{{detail.title}}</h3>
    <!-- 头部 -->
    <div class="header">
      <span class="author">
        {{ $t('msg.article.author') }}: {{ detail.author }}
      </span>
      <span class="time">
        {{ $t('msg.article.publicDate') }}: {{ $filters.relativeTime(detail.publicDate) }}
      </span>
      <el-button type="text" class="edit" @click="onEditClick">
        {{ $t('msg.article.edit') }}
      </el-button>
    </div>
    <!-- 内容 -->
    <div id="markdown-box"></div>
  </div>
</template>

<script setup>
import { articleDetail } from '@/api/article'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import MKeditor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/i18n/zh-cn'

// 获取数据
const route = useRoute()
const articleId = route.params.id
const detail = ref({})
const getArticleDetail = async () => {
  detail.value = await articleDetail(articleId)
  initEditor()
}
getArticleDetail()

const router = useRouter()
const onEditClick = () => {
  router.push(`/article/editor/${articleId}`)
}

// const store = useStore()
const initEditor = () => {
  // eslint-disable-next-line
  const viewer = MKeditor.factory({
    // el 渲染的区域
    el: document.querySelector('#markdown-box'),
    // 高度
    height: '500px',
    // 样式
    previewStyle: 'vertical',
    viewer: true,
    initialValue: detail.value.content
  })
}

</script>
<style lang="scss" scoped>
.article-detail-container {
  .title {
    font-size: 22px;
    text-align: center;
    padding: 12px 0;
  }
  .header {
    padding: 26px 0;
    .author {
      font-size: 14px;
      color: #555666;
      margin-right: 20px;
    }
    .time {
      font-size: 14px;
      color: #999aaa;
      margin-right: 20px;
    }
    .edit {
      float: right;
    }
  }
  .content {
    font-size: 14px;
    padding: 20px 0;
    border-top: 1px solid #d4d4d4;
  }
}
</style>
